Intoduction


img

Masco - Django 5 & Tailwind CSS - Saas Software Startup Template

Created : 14-May-2024
Updated : 04-June-2024
By : PixcelsThemes
E-mail:pixcelsthemes@gmail.com
Version : 1.2.0

Thank you for purchasing Masco - Django 5 & Tailwind CSS Saas Software Startup Template. If you have any questions that are beyond the scope of this help file, please feel free to email, via my user page contact form or put a ticket at Support Center .
Thank you so much!

Getting Started


  • Install Python:
  • Make sure Python (We recommend version 3.12.3) is installed on your machine. If not already installed, you can download and install Python from the official website.
  • Install Django:
  • Make sure Django (We recommend version 5.0) is installed on your machine. If not already installed, you can use pip command: pip install django==5.0
  • This Template is Tailwind CSS, where you need to install Node.js. You can download Node.js LTS from here

After install Node.js, open the terminal in to the masco folder root directory and run npm install
or yarn install
for install node package modules.

Here all the packages will be installing. After installed all packages , you can run npm start
or yarn start for local development purpose

For minify Tailwind CSS in to the Production version run npm run minify
or yarn minify

Tailwind File Configuration


You can customize/ configuration fonts, color, screen, plugins etc from tailwind.config.js file. For more details Visit Tailwind Configuration Document

image html

Folder Structure


    HTML Folder
        Masco/
        ├─ build/
        │  ├─ tailwind.css
        ├─ Masco/
        │  ├─ Django Project Files like views.py, urls.py etc.
        ├─ static/
        │  ├─ css/
        │  │  ├─ all CSS files
        │  ├─ fonts/
        │  │  ├─ all Fonts files
        │  ├─ img/
        │  │  ├─ all Images files
        │  ├─ js/
        │  │  ├─ all JavaScript files
        ├─ templates/
        │  ├─ All html pages resides in this directory.
        ├─ db.sqlite3
        ├─ manage.py
        ├─ package.json
        ├─ tailwind.config.js

HTML Structure


The html template uses Latest Tailwind 3 with valid HTML5 tags. This theme is a responsive layout. All of the information in content area is nested within a class and comes with predefined classes.

image html


Output


image html

Tailwind Files and Structure


Mainly 2 main CSS files are used in this theme. The first one tailwind.css in build folder to generate style.css file into the static/css folder, second one is custom.css to control the layouts.


image html

JavaScript


This theme imports 2 types of Javascript files. All of these free from jquery dependency.

  • main.js
  • vendors/clients JavaScript plugins



image html

Contact form Structure


image html


Output


image html

Required File


Required Css


image html


Required Js


image html

Logo Structure


image html

Blog Structure


image html

Widget Structure


image html

Sources and Credits


Fonts Used in the template are google fonts

Fonts Used are :


Image Used:


Sliders Used Are :

Swiper Slider ( Swiper Slider )


Every Code is properly commented for Editing Ease.

Support


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have any queries, please feel free to contact us at

pixcelsthemes@gmail.com

Email Us at : Pixcels Themes